import React, { Component } from 'react'
//路由传参
import {withRouter} from "react-router-dom"
import {Modal, Button, WhiteSpace, WingBlank,Toast,InputItem } from "antd-mobile"
import "./index.scss"
import IntegralTs from '../../assets/img/integral-ts.png'
import IntegralLw from '../../assets/img/integral-lw.png'
import IntegralMx from '../../assets/img/integral-mx.png'
import IntegralZs from '../../assets/img/integral-zs.png'
import moment from 'moment'
import Axios from 'axios'
import Code from '../../assets/img/code.jpg'
import { BASE_URL } from '../../utils/requestPath'
import requestAxios from '../../utils/myaxios'
import LwBlue from '../../assets/img/lw_blue.png' 
const prompt = Modal.prompt;
const alert = Modal.alert;
const operation = Modal.operation;
class Index extends Component {

    state = {
        reSet:"<",
        userCountIntegral:0,
        userInfoList:[],
        platformStart:null,
        userinfos:{},
        lotteYahooDataList:[],
        amazonClickServiceStart:false,
        userMansion:"",
        userCity:"",
        userStreet:"",
        userZipCode:"",
        telephone:"",
        userName:"",
        addressSum:"",
        lotteServiceStart:false,
        amazonExchangerecord:{},
        amazonColor:"#ccc",
    }

    integralOnClick=()=>{
        this.props.history.push("/integraldetailed")
    }

    handleClick = (params) => {
        this.props.history.push("/searchCenter");
    }
 
    escOnClick=()=>{
        this.props.history.push("/navigator")
    }

    componentIntegralCount=()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {};
        console.log("integral.......打印")
        console.log(userInfoIns)

        if(userInfoIns){
            //获取用户当前的积分
            requestAxios.get(BASE_URL+"/api/integral/find/list/"+userInfoIns.id).then(res=>{
                console.log(res.data)
                this.setState({
                    userCountIntegral:res.data
                })
            })
        }

        // const mainIntegralExchange = localStorage.setItem("");
        // const mainINtegralEx = JSON.parse(mainIntegralExchange);

    }

    async componentDidMount(){
        await this.componentIntegralCount()
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {};
        console.log(userInfos)
        await this.requestUserInfo()
        if(userInfoIns.platform_address === 2){
            this.setState({
                platformStart:true
            })
        }

        if(this.state.userinfos !== 2){
            this.lotteYahooRequest()
        }

        document.title="积分中心"
        console.log("进来了.........")
        await this.componentIntegral()

        
        
    }

    //亚马逊(日本)
    componentIntegral=()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {};
        const zgUserId = userInfoIns.id;
        const userInfoId = {zgUserId};
        if(userInfoIns){
            //获取用户当前的积分
            requestAxios.post(BASE_URL+"/api/coupon/find/all/0/0",userInfoId).then(res=>{
               this.setState({
                   userInfoList:res.data.list
               })
               //console.log(res.data)
            })
        }
    }

    requestUserInfo = ()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {};
        const zgUserId = userInfoIns.id;
        //console.log(userInfos)
        if(zgUserId){
            //获取用户
            requestAxios.get(BASE_URL+"/api/user/getid/"+zgUserId).then(res=>{                
                this.setState({
                    userinfos:res.data,
                    userMansion:res.data.userMansion,
                    userCity:res.data.userCity,
                    userStreet:res.data.userStreet,
                    userZipCode:res.data.userZipCode,
                    telephone:res.data.telephone,
                    userName:res.data.userName,
                })

                console.log(res.data.platformAddress)
            })
        }

    }

    startOnClick=(e)=>{
        //console.log(e)
        console.log("打印了")
    }

    copyText = () => {
        var val = document.getElementById('text');
        window.getSelection().selectAllChildren(val);
        document.execCommand("Copy");
    }

    //乐天 雅虎get request data
    lotteYahooRequest=()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {};
        const zgUserId = userInfoIns.id;
        const userInfo = {zgUserId};
        console.log(userInfo)
        requestAxios.post(BASE_URL+"/api/goods/exchange/find/all/0/0",userInfo).then(res=>{
            if(res.data.flag){
                this.setState({
                    lotteYahooDataList:res.data.data
                })    
                console.log(res.data.data)
            }
        })
    }

    //亚马逊兑换记录详情
    amazonClickService=(value)=>{
        console.log(value)
        this.setState({
            amazonClickServiceStart:true,
            amazonExchangerecord:value
        })
    }

    //乐天,雅虎兑换业务详情....
    lotteClickServicew=async(value)=>{
        console.log(value)

        //弹出地址框
        await this.setState({
            lotteServiceStart:true
        })
        
        await this.addressSumOnchange()
    }


    //存储状态
    mansionOnchange=async(value)=>{
        await this.setState({
            userMansion:value
        })
        await this.addressSumOnchange()
    }
    userCityOnchange=async(value)=>{
        await this.setState({
            userCity:value
        })
        await this.addressSumOnchange()
    }
    userStreetOnchange=async(value)=>{
        await this.setState({
            userStreet:value
        })
        await this.addressSumOnchange()
    }
    userZipCodeOnchange=async(value)=>{
        await this.setState({
            userZipCode:value
        })
        await this.addressSumOnchange()
    }
    telephoneOnchange=async(value)=>{
        await this.setState({
            telephone:value
        })
        await this.addressSumOnchange()
    }
    userNameOnchange=async(value)=>{
        await this.setState({
            userName:value
        })
        await this.addressSumOnchange()
    }
    addressSumOnchange=async(value)=>{

         const {userMansion,
            userCity,
            userStreet,
            userZipCode,
            telephone,
            userName,
        } = await this.state;

        //let addressStr = await "详细地址:"+ userMansion+" "+userCity+" "+userStreet+"    邮编:"+userZipCode+"    电话:"+telephone+"    收件人:"+userName + "    "
        // if(!userMansion){
        //     userMansion = ""
        // }
        // if(!userCity){
        //     userCity = ""
        // }
        // if(!userStreet){
        //     userStreet = ""
        // }
        // if(!userZipCode){
        //     userZipCode = ""
        // }
        // if(!telephone){
        //     telephone = ""
        // }
        // if(!userName){
        //     userName = ""
        // }

        if(userMansion && userCity && userStreet && userZipCode && telephone && userName){
            let addressStr = await ""+ userMansion+" "+userCity+" "+userStreet+"    "+userZipCode+"    "+telephone+"    "+userName + "    "
            await this.setState({
                addressSum:addressStr
            })
        }

        //console.log(addressStr)
    }

    clearLotteStart=()=>{
        this.setState({
            lotteServiceStart:false
        })
    }

    requestFormStart=async()=>{
        //第一步获取缓存id
        const userInfo = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfo)
        const id = userInfoIns.id;
        //第二部提交存储数据
        const {userMansion,
            userCity,
            userStreet,
            userZipCode,
            telephone,
            userName,
        } = await this.state;

        if(id && userMansion && userCity && userStreet && userZipCode && telephone && userName){
            //第三部创建接受对象
            const userInfoRequest = {id,userMansion,userCity,userStreet,userZipCode,telephone,userName}
            console.log(userInfoRequest)
            await requestAxios.put(BASE_URL+"/api/user/update",userInfoRequest).then(res=>{
                //.............
                console.log(res.data)
                if(res.data === 1){
                    Toast.success('Load success !!!', 1);
                    this.setState({
                        lotteServiceStart:false
                    })
                }
            })
        }else{
            Toast.offline('收货地址填写有误.........', 1);
        }
    }
    //确定兑换
    determineOnclick=()=>{
        const zgUserId = this.state.amazonExchangerecord.zgUserId;
        const id = this.state.amazonExchangerecord.id
        const couponState = 1;
        const couponDto = {zgUserId,couponState,id};
        requestAxios.put(BASE_URL+"/api/coupon/update",couponDto).then(res=>{
            if(res.data.flag){
                // get request data
                // alert message success
                console.log("成功")
                this.componentIntegral()
                this.setState({
                    amazonClickServiceStart:false,
                    amazonExchangerecord:{}
                })
            }
        })
    }


    //取消兑换
    clearAmazonOnclick=()=>{
        this.setState({
            amazonClickServiceStart:false,
            amazonExchangerecord:{}
        })
    }
    render() {
        const {reSet,userCountIntegral} = this.state
        return (
          <div className="main-integral">
              {/*  亚马逊业务 */}
             {this.state.userinfos.platformAddress === 2?
                <div> 
                    {/* 头部,返回,评价 */}
             <header className="main-integral-header-exchangerecord">
                <div className="main-integral-header-con" onClick={this.escOnClick}>
                    <span className="main-integral-header-con-span-one">{reSet}</span>
                    <span  className="main-integral-header-con-span-two">戻る</span>
                </div>
                <h4>
                引換履歴
                </h4>
                <h5 style={{color:"#fff"}}>s</h5>
            </header>

            {/* 积分兑换 */}
            <div className="main-integral-exchange">
               
                <div className="main0integral-300-500-1000">
                    {/* 300日元优惠券 */}
                    <div className="main-integral-exchange-list-title" style={{display:"flex",flexDirection:"row",
                                justifyContent:"space-around",alignItems:"center",width:"100%",marginBottom:20
                                }}>
                        <h4>编号</h4>
                        <h4>兑换了多少日元</h4>
                        <h4>兑换时间</h4>
                        <h4>操作</h4>
                    </div>
                    <div className="main-integral-exchange-list" style={{width:"100%",paddingRight:20,lineHeight:2}}>
                        {this.state.userInfoList.map((value,index)=>{
                            return (
                                <div 
                                onClick={this.amazonClickService.bind(this,value)}
                                className="main-integral-exchange-list-content" style={{display:"flex",flexDirection:"row",
                                justifyContent:"space-around",alignItems:"center",marginBottom:10
                                }} key={index}>
                                    <h4>{parseInt(index)+1}</h4>
                                    <h4>{value.couponCount}<span>日元</span></h4>
                                    {/* YYYY-MM-DD hh:mm:ss */}
                                    <h4>{moment(new Date(parseInt(value.createTime))).format("MM-DD hh:mm")}</h4>
                                    {value.couponState == 1?
                                    <Button 
                                    className="main-coupon-start"
                                    disabled>已使用</Button>
                                    :
                                    <Button
                                    className="main-coupon-start-no"
                                        // onClick={() =>
                                        //     alert('是否使用以下折扣码', value.couponTitle, [
                                        //     { text: 'Cancel', onPress: () => console.log('cancel') },
                                        //     { text: 'Ok', onPress: () => {
                                        //         console.log(value)
                                        //         const zgUserId = value.zgUserId;
                                        //         const id = value.id
                                        //         const couponState = 1;
                                        //         const couponDto = {zgUserId,couponState,id};
                                        //         requestAxios.put(BASE_URL+"/api/coupon/update",couponDto).then(res=>{
                                        //             if(res.data.flag){
                                        //                 // get request data
                                        //                 // alert message success
                                        //                 console.log("成功")
                                        //                 this.componentIntegral()

                                        //             }
                                        //         })
                                        //     } },
                                        //     ])
                                        // }
                                        >
                                        立即使用
                                        </Button>}

                                </div>    
                            )
                        })}
                    </div>
                    
                </div>
            </div>

                </div>:
                <div> 
                {/* 乐天雅虎业务 */}
                {/* 头部,返回,评价 */}
         <header className="main-integral-header-exchangerecord">
            <div className="main-integral-header-con" onClick={this.escOnClick}>
                <span className="main-integral-header-con-span-one">{reSet}</span>
                <span  className="main-integral-header-con-span-two">戻る</span>
            </div>
            <h4>
            引換履歴
            </h4>
            <h5 style={{color:"#fff"}}>s</h5>
        </header>

        {/* 积分兑换 */}
        <div className="main-integral-exchange">
           
            <div className="main0integral-300-500-1000">
                {/* 300日元优惠券 */}
                {/* 头部可用积分 */}
                <div className="main-integral-exchange-count">
                        <div className="main-integral-exchange-content">

                            <div className="main-integral-exchange-left">
                                <h3>利用可能ポイント</h3> <h4>{userCountIntegral}</h4>
                            </div>
                            <div className="main-integral-exchange-right">
                                <div onClick={this.integralOnClick} className="main-integral-exchange-jf"><img src={IntegralMx}></img> <h5>利用可能ポイント</h5></div>
                                <div className="main-integral-exchange-jf"><img src={LwBlue}></img> <h5>引換履歴</h5></div>
                            </div>

                            <span>您有1320积分将于10-30过期</span>
                        </div>
                        
                    </div>
                    {/* 头部可用积分结束 */}
                    {/* 记录list列表 */}
                    {this.state.lotteYahooDataList.map((value,index)=>{
                        return (
                            <div key={index} className="main-integral-exchange-list-content">
                                <div className="main-integral-exchange-left-content">
                                    <h3>{value.exchangeState === 1?"代金引換":"现金兑换"}</h3>
                                </div>
                                <div className="main-integral-exchange-list-contentx">
                                    <h5>{value.goodsName}</h5>
                                </div>    
                                <div onClick={this.lotteClickServicew.bind(this,value)}  className="main-integral-exchange-right-content">
                                    <span>{value.goodsIntegralExchange}</span>
                                </div>
                                <h4 >{moment(new Date(parseInt(value.createTime))).format("YYYY-MM-DD HH:mm:ss")}</h4>
                            </div>
                        )
                    })}
                    
                </div>
              </div>
            </div>
            }
            {/* 亚马逊兑换记录详情 */}
            {this.state.amazonClickServiceStart?
            <div className="main-exchangerecore-amazon-service">
                <p><h3>兑换码:</h3><h4>{this.state.amazonExchangerecord.couponTitle}</h4></p>
                <div className="main-exchangerecore-amazon-service-qd"> 
                    <h2
                    onClick={this.clearAmazonOnclick}
                    >取消</h2>  <h3 style={{color:`${this.state.amazonExchangerecord.couponState === 1?"#ccc":"#000"}`}} onClick={this.determineOnclick}>确定兑换</h3>
                </div>    
            </div>:""}
            
            {/* 是否兑换.... */}
            {this.state.lotteServiceStart?
                <div className="main-exchangerecore-lotte-servicew">
                {/* 州 */}
                <div className="app-main-email-start-lotte">
                <h4>県</h4>
                    <InputItem
                        type="text"
                        placeholder="県"
                        //error={this.state.hasError}
                        //onErrorClick={this.onErrorClick}
                        onChange={this.mansionOnchange}
                        value={this.state.userMansion}
                        //style={{widht:400}}
                    ></InputItem>
                </div>

                {/* 市 */}
                <div className="app-main-email-start-lotte">
                <h4>市</h4>
                    <InputItem
                        type="text"
                        placeholder="市"
                        //error={this.state.hasError}
                        //onErrorClick={this.onErrorClick}
                        onChange={this.userCityOnchange}
                        value={this.state.userCity}
                        //style={{widht:400}}
                    ></InputItem>
                </div>

                 {/* 详细地址 */}
                 <div className="app-main-email-start-lotte">
                <h4>住所</h4>
                    <InputItem
                        type="text"
                        placeholder="住所"
                        //error={this.state.hasError}
                        //onErrorClick={this.onErrorClick}
                        onChange={this.userStreetOnchange}
                        value={this.state.userStreet}
                        //style={{widht:400}}
                    ></InputItem>
                </div>

                {/* 邮编 */}
                <div className="app-main-email-start-lotte">
                <h4>郵便番号</h4>
                    <InputItem
                        type="text"
                        placeholder="郵便番号"
                        //error={this.state.hasError}
                        //onErrorClick={this.onErrorClick}
                        onChange={this.userZipCodeOnchange}
                        value={this.state.userZipCode}
                        //style={{widht:400}}
                    ></InputItem>
                </div>

                {/* 电话 */}
                <div className="app-main-email-start-lotte">
                <h4>電話番号</h4>
                    <InputItem
                        type="text"
                        placeholder="電話番号"
                        //error={this.state.hasError}
                        //onErrorClick={this.onErrorClick}
                        onChange={this.telephoneOnchange}
                        value={this.state.telephone}
                        //style={{widht:400}}
                    ></InputItem>
                </div>

                {/* 姓名 */}
                <div className="app-main-email-start-lotte">
                <h4>名前</h4>
                    <InputItem
                        type="text"
                        placeholder="名前"
                        //error={this.state.hasError}
                        //onErrorClick={this.onErrorClick}
                        onChange={this.userNameOnchange}
                        value={this.state.userName}
                        //style={{widht:400}}
                    ></InputItem>
                </div>
                
                {/* 汇总..... */}
                <div className="app-main-email-start-lotte">
                <h4>住所:</h4>
                <p className="app-main-email-p">{this.state.addressSum}</p>
                   
                </div>

                {/* 操作提示........ */}
                <div className="app-main-email-start-lotte-button">
                    <h3 onClick={this.clearLotteStart}>キャンセル</h3>
                    <h4 onClick={this.requestFormStart}>確認</h4>
                </div>

            </div>
            :""}
            {/* 乐天/雅虎兑换记录地址信息详情 */}
            <div onClick={this.lotteClickServicew.bind(this,1000)}  className="app-main-email-address" style={{position:"fixed",bottom:0,width:"100%",height:40,background:"orange",alignItems:"center",textAlign:"center"}}>お届け先</div>
          </div>
        )
    }
}
export default withRouter(Index)
